/*
 * @Author: WangGuojian 1085844536@qq.com
 * @Date: 2023-03-27 16:45:48
 * @LastEditTime: 2023-03-28 19:14:25
 * @LastEditors: WangGuojian 1085844536@qq.com
 * @FilePath: \react-admin_clientd:\Developer\WGJ\VSCode_WorkSpace\Web\typescript\code\chapter01\part3\webpack.config.js
 * @Description:
 */
// 引入一个包
const path = require('path');

// 引入 html 插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { resolve } = require('path');

// webpack 中的所有配置信息都应该写在 module.exports 中
module.exports = {
    // 指定入口文件
    entry: './src/index.ts',

    // 指定打包文件所在目录
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件的文件
        filename: 'bundle.js',

        // 告诉 webpack 不使用箭头
        environment: {
            arrowFunction: false,
        },
    },
    mode: 'production',
    // 指定 webpack 打包时要使用的模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test 指定的规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: [
                    // 配置 babel
                    {
                        // 指定加载器
                        loader: 'babel-loader',
                        // 设置 babel
                        options: {
                            // 设置预定义环境
                            presets: [
                                [
                                    // 指定环境的插件
                                    '@babel/preset-env',
                                    // 配置信息
                                    {
                                        //要兼容的目标浏览器
                                        targets: {
                                            chrome: '58',
                                            ie: '11',
                                        },
                                        // 指定 coresjs 的版本
                                        corejs: '3',
                                        useBuiltIns: 'usage',
                                    },
                                ],
                            ],
                        },
                    },
                    'ts-loader',
                ],
                // 要排除的文件
                exclude: /node-modules/,
            },
        ],
    },

    // 配置 Webpack 插件
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            // title: '这是一个自定义的title',
            template: './src/index.html',
        }),
    ],

    // 用来设置引用模块
    resolve: {
        extensions: ['.ts', '.  js'],
    },
};
